<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
    <link rel="stylesheet" href="app.css"></link>
</head>
<body>
<script type="text/javascript">
</script>
<div id="app-1">

  <app-layout>
      <h1 slot="header">这里可能是一个页面标题</h1>

      <p>主要内容的一个段落</p>
      <p>另一个主要段落</p>

      <p slot="footer">这里有一些联系信息</p>

  </app-layout>
</div>
</body>
<script type="text/javascript">
    Vue.component("app-layout",{
       template:
        '<div class="container">'+
        '<header>'+
        '<slot name="header"></slot>'+
        '</header>'+
        '<main>'+
        '<slot></slot>'+
        '</main>'+
        '<footer>'+
        '<slot name="footer"></slot>'+
        '</footer>'+
        '</div>',

    });
    var app = new Vue({
        el:'#app-1'
    })
</script>
</html>